<template>
  <el-card class="box-card" style="margin-bottom:1%; min-height:62vh">
    <div slot="header" class="titleBox">
      <span>{{ titleName[1]||任务列表 }}</span>
      <!-- <i class="el-icon-search"/> -->
    </div>
    <el-table
      ref="tableData"
      :data="tableData"
      border
      style="width: 100%;margin-bottom:1%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"/>
      <el-table-column
        v-for="(item,index) in tableList"
        :key="index"
        :label="item.label"
        :width="item.width">
        <template slot-scope="scope">
          {{ scope.row[item.data] }}
        </template>
      </el-table-column>
      <el-table-column v-if="operatingoState" label="操作" width="185px">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            icon="el-icon-edit-outline"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          <bug-operation/>
        </template>
      </el-table-column>

    </el-table>
    <pagination
      :paginations="paginations"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"/>
  </el-card>
</template>

<script>
import pagination from '@/components/pagination/index'
import bugOperation from '@/components/operation/bug-operation'
export default {
  components: {
    pagination,
    bugOperation
  },
  props: {
    // table数据
    tableData: {
      type: Array,
      default: () => ({})
    },
    // 表头名称
    tableList: {
      type: Array,
      default: () => ({})
    },
    // 操作隐藏显示状态
    operatingoState: {
      type: Boolean,
      default: Boolean
    },
    // 列表名称
    titleName: {
      type: Array,
      default: () => ({})
    }
  },
  data() {
    return {
      // tableData: [],
      // tableList: [
      //   { label: 'ID', width: '110' },
      //   { label: '所属项目', width: '180' },
      //   { label: '任务名称', width: '180' },
      //   { label: '创建', width: '180' },
      //   { label: '指派给', width: '180' },
      //   { label: '由谁完成', width: '180' },
      //   { label: '预计时间', width: '180' },
      //   { label: '消耗时间', width: '180' },
      //   { label: '状态', width: '120' }
      // ],
      paginations: {
        totalNum: 50,
        currentPage: 1,
        pageSize: 10
      },
      deleteDepArry: []// 删除arr
    }
  },

  methods: {
    // 行内数据改变触发，用于顶层多数据删除
    handleSelectionChange(val) {
      this.deleteDepArry = []
      // this.multipleSelection = val
      // val.forEach(element => {
      //   this.deleteDepArry.push(element.id)
      // })
      console.log(this.deleteDepArry)
      this.$emit('deleteArry', val)
    },
    // 改变分页的时候查询数据
    handleSizeChange(val) {
      // console.log(val)
      this.$emit('handleSizeChange', val)
      // this.SearchDep.pageSize = val
      // this.getDeparList()
    },
    // 当前页数据查询
    handleCurrentChange(val) {
      // this.SearchDep.pageNum = val
      // this.getDeparList()
      this.$emit('handleCurrentChange', val)
    },
    // 行内编辑
    handleEdit(index, row) {
      this.$emit('handleEdit', row)
      // this.addForm = {
      //   orgKey: row.orgKey
      // }
      // this.changeDep('edit')
      // this.dialogFormVisible = true
      // this.dialogTitle = '机构修改'
    },
    // 行内删除
    handleDelete(index, row) {
      this.$emit('handleDelete', row)
      // this.$refs.tableData.clearSelection()
      // this.deleteDepArry = []
      // this.deleteDepArry.push(row.orgKey)
      // this.deleteDepar()
    }
  }
}
</script>

<style lang="scss">
.box-card .el-table .cell{
  text-align: center !important;

}
.titleBox{
    display: flex;
    justify-content: space-between;
    .el-icon-search{
      font-size: 24px;
      cursor: pointer;
    }
}
</style>
